<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-shaohuo-person-add-edit-person">
    <el-dialog
      :title="`${type}捎货人`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="80%">
      <!-- 表单主题
      -------------------------- -->
      <div class="gl-form-block"
        layout layout-align="start start" layout-wrap>
        <h3 class="gl-form-block__title" flex="100">基本信息(必填)</h3>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="手机号码"
          prop="mobile"
          :rules="[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatorPhone, trigger: 'blur' }
          ]">
          <el-input v-model="addEditForm.mobile"
            placeholder="请输入手机号码"
            :disabled="isEditing"></el-input>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="真实姓名"
          prop="real_name"
          :rules="{ required: true, message: '请输入真实姓名', trigger: 'blur' }">
          <el-input v-model="addEditForm.real_name"
            placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="身份证号"
          prop="id_card"
          :rules="[
            { required: true, message: '请输入身份证号', trigger: 'blur' },
            { validator: validatorIdCard, trigger: 'blur' }
          ]">
          <el-input v-model="addEditForm.id_card"
            placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="紧急联系人"
          prop="emergency_contact"
          :rules="{ required: true, message: '请输入紧急联系人', trigger: 'blur' }">
          <el-input v-model="addEditForm.emergency_contact"
            placeholder="请输入紧急联系人"></el-input>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="联系人手机"
          prop="emergency_contact_phone"
          :rules="[
            { required: true, message: '请输入联系人手机', trigger: 'blur' },
            { validator: validatorPhone, trigger: 'blur' }
          ]">
          <el-input v-model="addEditForm.emergency_contact_phone"
            placeholder="请输入联系人手机"></el-input>
        </el-form-item>
        <el-form-item
          flex="50"
          class="gl-form-block__item"
          label="捎货类型"
          prop="fc_ids"
          :rules="{ required: true, message: '捎货类型不能为空', trigger: 'blur' }">
          <el-select 
            v-model="addEditForm.fc_ids"
            @visible-change="visibleChange"
            multiple
            :loading="!hasAllTypeList"
            placeholder="选择捎货类型">
            <el-option 
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="gl-form-block"
        layout layout-align="start start" layout-wrap>
        <h3 class="gl-form-block__title" flex="100">照片上传（带红色星号的信息为必填信息）</h3>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="身份证正面"
          prop="idcard_front"
          :rules="{ required: true, message: '身份证正面没有上传', trigger: 'blur' }">
          <comp-img-upload
            model="idcard_front"
            ref="idcard_front"
            :clearAllImg="clearAllImgByToogle"
            :imgsrc="addEditForm.idcard_front"
            :uploadImg="uploadImg"
            :OSSPolicy="OSSPolicy"
            @fileChange="uploadFileChange"
            @success="uploadSuccess"
            @error="uploadError"></comp-img-upload>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="身份证背面"
          prop="idcard_back"
          :rules="{ required: true, message: '身份证背面没有上传', trigger: 'blur' }">
          <comp-img-upload
            model="idcard_back"
            ref="idcard_back"
            :clearAllImg="clearAllImgByToogle"
            :imgsrc="addEditForm.idcard_back"
            :uploadImg="uploadImg"
            :OSSPolicy="OSSPolicy"
            @fileChange="uploadFileChange"
            @success="uploadSuccess"
            @error="uploadError"></comp-img-upload>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="行驶证">
          <comp-img-upload
            model="vehicle_license"
            ref="vehicle_license"
            :clearAllImg="clearAllImgByToogle"
            :imgsrc="addEditForm.vehicle_license"
            :uploadImg="uploadImg"
            :OSSPolicy="OSSPolicy"
            @fileChange="uploadFileChange"
            @success="uploadSuccess"
            @error="uploadError"></comp-img-upload>
        </el-form-item>
        <el-form-item 
          flex="50"
          class="gl-form-block__item"
          label="驾驶证">
          <comp-img-upload
            model="driver_license"
            ref="driver_license"
            :clearAllImg="clearAllImgByToogle"
            :imgsrc="addEditForm.driver_license"
            :uploadImg="uploadImg"
            :OSSPolicy="OSSPolicy"
            @fileChange="uploadFileChange"
            @success="uploadSuccess"
            @error="uploadError"></comp-img-upload>
        </el-form-item>
      </div>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoPersonService, ShaohuoContentService } from 'services/Api'
import { RegExService } from 'services/Util'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

import { dialogUploadMixin } from './dialog-mixins'

export default {
  name: 'PgTypeAddtype',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin,
    dialogUploadMixin
  ],
  data () {
    return {
      addEditForm: {
        real_name: '',
        mobile: '',
        id_card: '',
        emergency_contact: '',
        emergency_contact_phone: '',
        fc_ids: [],
        idcard_front: '',
        idcard_back: '',
        vehicle_license: '',
        driver_license: ''
      },
      typeList: null, // 类型列表
      hasAllTypeList: false // 是否已获取所有类型列表
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 可用捎货人类型(下拉框使用)参数
    shaohuoTypeParam () { return { acc_id: this.acc_id } },
    // 添加参数
    addShaohuoUserParam () {
      return {
        acc_id: this.acc_id,
        real_name: this.addEditForm.real_name,
        mobile: this.addEditForm.mobile,
        id_card: this.addEditForm.id_card,
        emergency_contact: this.addEditForm.emergency_contact,
        emergency_contact_phone: this.addEditForm.emergency_contact_phone,
        fc_ids: this.addEditForm.fc_ids.join(','),
        idcard_front: this.addEditForm.idcard_front,
        idcard_back: this.addEditForm.idcard_back,
        vehicle_license: this.addEditForm.vehicle_license,
        driver_license: this.addEditForm.driver_license
      }
    },
    // 修改参数
    editShaohuoUserParam () {
      return {
        acc_id: this.acc_id,
        uid: this.editData.uid,
        real_name: this.addEditForm.real_name,
        mobile: this.addEditForm.mobile,
        id_card: this.addEditForm.id_card,
        emergency_contact: this.addEditForm.emergency_contact,
        emergency_contact_phone: this.addEditForm.emergency_contact_phone,
        fc_ids: this.addEditForm.fc_ids.join(','),
        idcard_front: this.addEditForm.idcard_front,
        idcard_back: this.addEditForm.idcard_back,
        vehicle_license: this.addEditForm.vehicle_license,
        driver_license: this.addEditForm.driver_license
      }
    }
  },
  methods: {
    // 下拉框出现/隐藏时触发
    visibleChange (boo) {
      // 出现时判断widgetList是否已获取，没有则调用接口获取
      if (boo && !this.hasAllTypeList) this.shaohuoTypeApi()
    },
    // 手机号验证
    validatorPhone (rule, value, cb) {
      if (RegExService.phone(value)) {
        cb()
      } else {
        cb(new Error('请输入合法的手机号'))
      }
    },
    // 身份证验证
    validatorIdCard (rule, value, cb) {
      if (RegExService.idCard(value)) {
        cb()
      } else {
        cb(new Error('请输入合法的身份证号'))
      }
    },
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        real_name: '',
        mobile: '',
        id_card: '',
        emergency_contact: '',
        emergency_contact_phone: '',
        fc_ids: [],
        idcard_front: '',
        idcard_back: '',
        vehicle_license: '',
        driver_license: ''
      }
      this.clearAllImgs()
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.real_name = v.real_name || ''
      this.addEditForm.mobile = v.mobile || ''
      this.addEditForm.id_card = v.id_card || ''
      this.addEditForm.emergency_contact = v.emergency_contact || ''
      this.addEditForm.emergency_contact_phone = v.emergency_contact_phone || ''
      this.addEditForm.fc_ids = v.funcs.map(i => i.fc_id) || []
      this.addEditForm.idcard_front = v.idcard_front || ''
      this.addEditForm.idcard_back = v.idcard_back || ''
      this.addEditForm.vehicle_license = v.vehicle_license || ''
      this.addEditForm.driver_license = v.driver_license || ''
      if (!this.hasAllTypeList) {
        this.typeList = v.funcs.map(i => { return { id: i.fc_id, name: i.func_name } })
      }
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 添加接口
    currentAddApi () {
      return ShaohuoPersonService.addShaohuoUser(this.addShaohuoUserParam)
    },
    // 修改接口
    currentEditApi () {
      return ShaohuoPersonService.updateShaohuoUser(this.editShaohuoUserParam)
    },
    // 可用捎货类型(下拉框使用)
    async shaohuoTypeApi () {
      const [ err, res ] = await ShaohuoContentService.shaohuoType(this.shaohuoTypeParam)
      if (err) return this.$message.error(err.message || '获取失败')
      this.typeList = res
      this.hasAllTypeList = true
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-add-edit-person) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }

}
</style>
